<template>
   <div class="container">
      <Panel @mouseDownHandle="mouseDownHandle" />
      <div id="container" ref="containerRef"></div>
   </div>

</template>

<script setup>
import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/index.css';
import { Menu } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css'
import { ref, onMounted } from 'vue'
import Panel from "./Panel.vue"
const containerRef = ref()
const ifO = ref()
LogicFlow.use(Menu);

const data = {
   // 节点
   nodes: [
      {
         id: 50,
         type: 'rect',
         x: 100,
         y: 150,
         text: '你好',
      },
      {
         id: 21,
         type: 'circle',
         text: 'fk',
         x: 300,
         y: 150,
      },
   ],
   // 边
   edges: [
      {
         type: 'polyline',
         sourceNodeId: 50,
         targetNodeId: 21,
      },
   ],
};


onMounted(() => {
   ifO.value = new LogicFlow({
      container: document.querySelector('#container'),
      stopScrollGraph: true, // 禁止鼠标滚动移动画布
      stopZoomGraph: true, // 禁止缩放画布-鼠标滚轮缩放

      width: 1000,
      height: 800,
      grid: {
         type: 'dot',
         size: 20,
      },
   })
   ifO.value.setTheme({
      snapline: {
         stroke: '#1E90FF', // 对齐线颜色
         strokeWidth: 1, // 对齐线宽度
      },
      anchorLine: {
         stroke: '#1E90FF',
         strokeWidth: 2,
         strokeDasharray: '3,2',
      },
      polyline: {
         stroke: '#1E90FF',
         strokeWidth: 2,
      },
   })
   ifO.value.render(data);

})

const mouseDownHandle = (config) => {

   ifO.value.dnd.startDrag(config);
}

</script>

<style lang="scss" scoped>
#container {
   width: 1000px;
   height: 800px;
   margin-left: 100px;
}

.container {
   display: flex;

}
</style>